<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="process-home-container">
            <page-search>
                <page-search-column class="fixed-column">
                    <page-search-item class="left" >
                        <el-button type="primary" @click="toEdit">添加</el-button>
                    </page-search-item>
                </page-search-column>
            </page-search>
            <el-table
                v-show="tableData.length"
                ref="multipleTable"
                :data="tableData"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                row-key="id"
                @select="handleSelectionChange"
                @selection-change="handleSelectionChange"
                @sort-change="sortChange"
                style="width: 100%;height: calc(100% - 58px);overflow-y: auto;">
<!--                <el-table-column-->
<!--                    align="center"-->
<!--                    type="selection"-->
<!--                    :reserve-selection="true"-->
<!--                    width="60">-->
<!--                </el-table-column>-->
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    label="流程名称"
                    prop="name"
                    min-width="220">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="toDetail(scope.row)">{{ scope.row.name }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    label="流程描述"
                    prop="description"
                    min-width="220">
                </el-table-column>
                <el-table-column
                    label="关联状态">
                    <template slot-scope="scope">
                        {{ scope.row.formList.length ? "已关联表单" : "未关联表单" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createDate"
                    label="创建时间"
                    show-overflow-tooltip
                    min-width="170">
                </el-table-column>
                <el-table-column
                    prop="createName"
                    label="创建人"
                    show-overflow-tooltip
                    min-width="170">
                </el-table-column>
                <el-table-column
                    label="操作"
                    show-overflow-tooltip
                    min-width="120">
                    <template slot-scope="scope">
                        <el-button v-if="!scope.row.formList.length" type="text" @click="toEdit(scope.row)">编辑</el-button>
                        <el-button v-if="!scope.row.formList.length" type="text" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="tableData.length === 0">
            </ask-empty-text>
        </div>
        <template v-slot:footer v-if="total > 0">
<!--            <div class="page-base-footer__right">
                <div class="num-box">
                    已选<span>{{ multipleSelection.length }}</span>条
                </div>
                <el-divider direction="vertical"></el-divider>
                <el-dropdown trigger="click" @command="handleBatchClick">
                    <el-button
                        class="pbb__search-btn">
                        批量操作<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                            icon="el-icon-delete-solid"
                            command="deleteRow"
                            :disabled="!multipleSelection.length">
                            删除
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>-->
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize"
                        @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HeaderFilter from "@/components/header-filter/index.vue";
import { State } from "vuex-class";
import { selecteTable } from "@/views/process-manage/src/components/selecte-table/index";

@Component({
    name: "ProcessHome",
    components: {
        HeaderFilter
    }
})
export default class ProcessHome extends Vue {
    @State(state => state.authArea) authArea: any;
    // 当前用户所处层级菜单
    get client() {
        return this.$getUserLevel(this.authArea.orgCategoryId).name;
    }

    btnDisabled = false

    // 表格数据
    tableData: any = []
    // 总数
    total = 0
    // 页码
    pageIndex = 1
    // 每页数量
    pageSize = 10
    // 选中内容
    multipleSelection: any = []
    form = {
    }

    // 排序
    sortType = "desc"

    created() {
        this.initData();
    }

    activated() {
        this.getTable();
    }

    initData() {
        this.getTable();
    }

    handleBatchClick(command: any) {
        if (command === "deleteRow") {
            this.deleteRow();
        }
    }

    // 获取表格数据
    getTable() {
        this.$server["process/getTable"]({
            data: {
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        }).then((res: any) => {
            if (res.data.code === 200) {
                this.tableData = res.data.data.records;
                this.total = res.data.data.total;
            } else {
                this.$message.error(res.data.message);
            }
        }).catch();
    }

    // 表格选中修改
    handleSelectionChange(val: any) {
        this.multipleSelection = val;
    }

    // 排序修改
    sortChange(colData: any) {
        this.sortType = colData.order === "ascending" ? "asc" : "desc";
        this.tableData = [];
        this.pageIndex = 1;
        this.getTable();
    }

    // 删除行
    deleteRow(row?: any) {
        this.$confirm("删除后将丢失全部相关数据 是否确认删除？", "提示")
            .then(() => {
                this.$server["process/delete"]({
                    data: {
                        // id: this.multipleSelection.map((item: any) => item.id).join(","),
                        id: row.id
                    }
                }).then((res: any) => {
                    if (res.data.code === 200) {
                        this.$message.success("删除成功");
                        this.getTable();
                    } else {
                        this.$message.error(res.data.message || "接口请求错误!");
                    }
                }).catch();
            })
            .catch();
    }

    // 去编辑
    toEdit(row: any) {
        this.$router.push({ path: "/process-manage/update", query: { xmlId: row.definitionId, modelId: row.modelId } });
    }

    // 去复制
    toCopy(row: any) {
        this.$message.success("复制成功");
        this.$router.push({ path: "/process-manage/update", query: { xmlId: row.definitionId, modelId: row.modelId, isCopy: "copy" } });
    }

    // 查看
    toDetail(row: any) {
        this.$router.push({ path: "/process-manage/detail", query: { xmlId: row.definitionId, modelId: row.modelId } });
    }

    // 关联表单
    toAssociationForm(row: any) {
        this.btnDisabled = true;
        selecteTable({
            selectedList: row.formList ? row.formList.map((item: any) => { return { id: item.formId, name: item.formName }; }) : [],
            isSingle: true,
            title: "关联表单",
            columnList: [{
                label: "表单名称",
                prop: "templateName"
            }, {
                label: "表单描述",
                prop: "description"
            }, {
                label: "表单类型",
                prop: "templateKind",
                customFilter: [{
                    value: 1,
                    label: "标准表单"
                }, {
                    value: 2,
                    label: "自定义表单"
                }]
            }],
            sure: (vm: any, model: any) => {
                vm.close();
                const formList = model.selectedList.map((item: any) => {
                    return { formId: item.id, formName: item.templateName };
                });
                this.$server["process/processBind"]({
                    data: {
                        formId: formList[0].formId,
                        processId: row.id
                    }
                }).then((res: any) => {
                    if (res.data.code === 200) {
                        this.$message.success("绑定成功");
                        this.getTable();
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch();
            },
            getOptions: (vm: any, model: any) => this.getOptions(vm, model),
            close: () => {
                this.btnDisabled = false;
            }
        });
    }

    // 获取选项
    getOptions(vm: any, model: any) {
        this.$server["process/getFormList"]({
            data: {
                currentPage: model.pageIndex,
                pageSize: model.pageSize,
                templateKind: model.templateKind || 0,
                name: model.name || undefined,
                status: this.$TASK_MODULE_STATUS.RELEASED.value
            }
        }).then((res: any) => {
            if (res.data.code === 200) {
                vm.getOptions(res.data.data.records);
                vm.total = res.data.data.total;
            } else {
                this.$message.error(res.data.message);
            }
        }).catch();
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .pbb__search-box {
        margin-bottom: 10px;
    }
}
.table-header-filter {
    cursor: pointer;
}

.table-header-is-select {
    color: #077BFF;
}

.process-home-container {
    height: 100%;
}
</style>
